<template>
  <a-modal
    :visible="iconSelectorVisible"
    :width="900"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <icon-selector :value="currentIcon" @change="handleIconChange" />
  </a-modal>
</template>

<script>
import IconSelector from '@/components/IconSelector'

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  components: {
    IconSelector
  },
  data () {
    return {
      iconSelectorVisible: false,
      currentIcon: ''
    }
  },
  methods: {
    handleIconChange (icon) {
      this.currentIcon = icon
      console.log('select icon:', icon)
    },
    show () {
      this.iconSelectorVisible = true
    },
    handleCancel () {
      this.iconSelectorVisible = false
    },
    handleOk () {
      this.$emit('change', this.currentIcon)
      this.handleCancel()
    }
  }
}
</script>

<style></style>
